<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="text-box" scroll-y="true">
			<text>{{ textcai }} \n {{ textzhushi }}</text>
			</view>
			<view class="uni-btn-v">
				<button type="primary" :disabled="!canAdd" @click="getRandomFoodadd">整个菜</button>
				<button type="primary" :disabled="!canAdd" @click="getRandomFoodadd2">整个主食</button>
			</view>
		</view>
	</view>
</template>

<script>
	import data from '@/static/json/data.json';
	export default {
			data() {
			  return {
				title: 'text',
				text: '',
				textcai: '',
				textzhushi:'',
				canAdd: true,
				canRemove: false,
				texts: data,
				extraLine: []
			  }
			},
			methods: {
			  getRandomFoodadd: function (){
			    // 获取数组的长度
			    var index = Math.floor(Math.random() * data.cai.length);
			    // 随机选择一个元素
			    this.textcai = data.cai[index];
			  },
			  getRandomFoodadd2: function (){
			    // 获取数组的长度
			    var index = Math.floor(Math.random() * data.zhushi.length);
			    // 随机选择一个元素
			    this.textzhushi = data.zhushi[index];
			  },
			  remove: function () {
				if (this.extraLine.length > 0) {
				  this.extraLine.pop();
				  this.text = this.extraLine.join('\n');
				  this.canAdd = this.extraLine.length < 12;
				  this.canRemove = this.extraLine.length > 0;
				}
			  },
			  textProps: function () {
				uni.navigateTo({
				  url: '/pages/component/text/text-props'
				})
			  }
			}
		  }
</script>

<style>
	.text-box {
		margin-bottom: 40rpx;
		padding: 40rpx 0;
		display: flex;
		min-height: 300rpx;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		color: #353535;
		line-height: 1.8;
	}
  .text {
    font-size: 15px;
    color: #353535;
    line-height: 27px;
    text-align: center;
  }
  
  .uni-padding-wrap{
  	/* width:690rpx; */
  	padding:0 30rpx;
  }
  .uni-common-mt{
  	margin-top:400rpx;
  }
  .uni-btn-v{
  	padding:10rpx 0;
  }
  .uni-btn-v button{margin:20rpx 0;}

</style>

